<template>
	<view class="orderconfirm">
		<!-- 地址选择 -->
		<view class="d-flex main-bg-color a-center text-white px-3" style="height: 250rpx;" @click="openPathList">
			<view>
				<template v-if="path">
					<view class="d-flex font-weight font-lg a-center">
						{{path.name}} {{path.phone}}
						<view class="border border-white rounded px-1 font ml-2 font-sm" v-if="path.default===1">默认</view>
					</view>
					<view class="font">
						{{path.province}} {{path.city}} {{path.district}} {{path.address}}
					</view>
				</template>
				<template v-else>
					<view class="font-weight font-md d-flex a-center font-lg">
						请选择收货地址
					</view>
				</template>
			</view>
			<view class="iconfont icon-you ml-auto"></view>
		</view>
		
		<view class="moddmin">
			<view class="bg-white">
				<uni-list-item showArrow>
					<template slot="header">
						<view class="d-flex a-center">
							<image :src="item.IMAGE1"
							style="width: 100rpx;height: 100rpx;" class="rounded mr-2"
							v-for="(item,index) in goodsList" :key="index"
							></image>
						</view>
					</template>
					<template slot="footer">
						<view>{{goodsList.length}}</view>
					</template>
				</uni-list-item>
				<uni-list-item  title="商品总价">
					<template slot="footer">
						<view class="text-dark">{{totalPrice}}元</view>
					</template>
				</uni-list-item>
				<uni-list-item  title="运费">
					<template slot="footer">
						<view class="text-dark">包邮</view>
					</template>
				</uni-list-item>
				<uni-list-item  title="优惠券" showArrow>
					<template slot="footer">
						<view class="text-light-muted">无可用</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template slot="header">
						<view class="main-text-color">小计</view>
					</template>
					<template slot="footer">
						<view class="main-text-color">{{totalPrice}}元</view>
					</template>
				</uni-list-item>
				<divider></divider>
				<uni-list-item  title="发票" showArrow>
					<template slot="footer">
						<view class="text-dark">电子发票-个人</view>
					</template>
				</uni-list-item>
			</view>
		</view>
		
		<view class="position-fixed d-flex bottom-0 left-0 right-0 bg-white j-end font-md a-center" style="height: 50px;">
			<text class="font font-weight">合计:</text>
			<view class="ml-2 main-text-color font-weight">{{totalPrice}}元</view>
			<view class="py-1 main-bg-color ml-2 py-1 px-3 font-md text-white font-weight" style="border-radius:80rpx">去付款</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
	export default {
		data() {
			return {
				items:[], //用来存放选中支付产品的PID
				path:false
			}
		},
		computed:{
			...mapState({
				list:state=>state.cart.list
			}),
			...mapGetters([
				'defaultPath',
				'totalPrice'
			]),
			//商品列表
			goodsList(){
				return this.items.map(PID=>{
					return this.list.find(v=>v.PID === PID)
				})
			}
		},
		onLoad(e) {
			if(!e.detail){ 
				uni.showToast({
					title: '请选择要下单的商品',
					icon: 'none'
				});
				return uni.navigateBack({
					delta: 1
				});
			}
			this.items = JSON.parse(e.detail);
			
			if(this.defaultPath.length){
				this.path = this.defaultPath[0]
			}
			
			// 开启监听选择收货地址事件
			uni.$on('choosePath',(res)=>{
				this.path = res
			})
		},
		onUnload() {
			// 关闭监听选择收货地址事件
			uni.$off('choosePath')
		},
		methods: {
			openPathList(){
				uni.navigateTo({
					url: '../user-path-list/user-path-list?type=choose'
				});
			}
		}
	}
</script>


<style lang="scss" scoped>
	.orderconfirm{
		background: #F5F5F5;
		min-height: 100%;
		height: auto;
		.moddmin{
			border-top-left-radius: 25rpx;
			border-top-right-radius: 25rpx;
			margin-top: -25rpx;
			overflow: hidden;
		}
	}
</style>


